<template>
  <div class="topic_con_scroll">
    <div v-for="(item, index) in readSpanStemlist" :key="index">
      <div class="topic_item" v-for="(v, i) in item.question" :key="i">
        <div class="topic_item_t">
          <p>Q{{ i + 1 }}</p>
          <img src="../../assets/image/lesson/answerT.png" alt="" />
          <p style="color: #373737; width: 7.4rem">{{ v.question }}</p>
          <div class="collection" @click="collection">
            <img
              v-if="true"
              src="../../assets/image/lesson/collection.png"
              alt=""
            />
            <img
              v-else
              src="../../assets/image/lesson/succ_collection.png"
              alt=""
            />
          </div>
        </div>
        <div class="topic_item_p">
          <div class="no_item_p_sel" v-if="!v.answer.length">空</div>
          <div
            v-else
            v-for="l in v.answer"
            :key="l.id"
            class="item_p_sel"
            @click="changeItemel(l, i)"
          >
            <img 
            v-if="$store.state.answer[i] == l.id"
              class="target"
              src="../../assets/image/lesson/target.png"
              alt=""
            />
            {{ l.answer_content }}
          </div>
        </div>
      </div>
    </div>

    <!-- 下一组 -->
    <div class="next_group" @click="nextGroup"  >
      <img src="../../assets/image/lesson/nextGroup.png" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  name: "topicProblem",
  props: ["readSpanStemlist"],
  data() {
    return {
      // 当前选中
      currItemel: [],
      // 倒计时
      countDownTime: 0,
      // 倒计时定时器
      setCountDownTime: null,
      // 数据是否已为空
      emptyData: false,
      // 答题框右下角提示时间
      tipsTime: null,
      // 答题框右下角状态 默认显示欢迎语
      tipsType: false,
      // 左上角组数提示图 默认第一组
      studyDataPicImg: 1,
    };
  },
  computed:{
    showNextGroup(){
      // 当前页数小于总页数 显示下一组按钮
      return this.$store.state.readSpanStemlist.current_page < this.$store.state.readSpanStemlist.total
    },
    currAnswer(){
      console.log(this.$store.state.answer);
    }
  },
  methods: {
    changeItemel(info, index) {
      console.log(info);
      this.$store.commit('setAnswer', {index,id:info.id})
      // this.$store.commit("setAnswer", { info, index });
      this.$forceUpdate();
    },
    // 收藏
    collection() {
      console.log("收藏");
    },
    // 下一组
    nextGroup() { 
      this.$store.commit('changeCurrentGroup')
      this.$store.commit('changeTestType','stem')
    },
  },
};
</script>

<style lang="less" scoped>
// .topic_problem {
//   padding: 1.17rem 0.6rem 0.38rem 1.01rem;
//   box-sizing: border-box;
//   height: 100%;
//   width: 100%;
// }
.topic_con_scroll {
  overflow-y: scroll;
  overflow-x: hidden;
  height: 100%;
  //火狐浏览器隐藏滚动条
  & {
    scrollbar-color: #9eb0e6 #f7f7f9;
    scrollbar-width: thin;
    scrollbar-track-color: transparent;
    -ms-scrollbar-track-color: transparent;
  }
  /* 设置滚动条的样式 谷歌  */
  &::-webkit-scrollbar {
    width: 12px;
  }
  /* 滚动槽 */
  &::-webkit-scrollbar-track {
    -webkit-box-shadow: inset006pxrgba(223, 224, 229);
    border-radius: 10px;
  }
  /* 滚动条滑块 */
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(158, 176, 230);
    -webkit-box-shadow: inset006pxrgba(158, 176, 230);
  }
  &::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(229, 226, 217);
  }
  .topic_item {
    font-size: 0.21rem;
    .topic_item_t {
      display: flex;
      & > span {
        color: #2175f4;
      }
      & > img {
        margin: 0 0.2rem;
        width: 0.75rem;
        height: 0.75rem;
      }
      .collection {
        margin: auto 0;
        width: 0.34rem;
        height: 0.34rem;
        cursor: pointer;
        & > img {
          width: 100%;
        }
      }
    }

    .topic_item_p {
      display: flex;
      flex-wrap: wrap;
      margin: 0.3rem 0;
      padding-left: 0.59rem;
      .item_p_sel {
        position: relative;
        margin: 0.13rem 0.4rem;
        // padding: 0 .3rem 0 .6rem;
        padding: 0 0.86rem 0 0.98rem;
        height: 0.85rem;
        line-height: 0.85rem;
        text-align: center;
        color: #333;
        font-size: 0.18rem;
        border: 1px solid #c8c7c4;
        border-radius: 45px;
        cursor: pointer;
        .target {
          position: absolute;
          top: 50%;
          left: 0.31rem;
          transform: translateY(-60%);
          width: 0.35rem;
          height: 0.38rem;
        }
      }
      .curr_item_p_sel {
        background: #e8edf3;
      }
    }
  }
  .next_group {
    float: right;
    width: 1.68rem;
    height: 0.66rem;
    cursor: pointer;
    & > img {
      width: 100%;
      height: 100%;
    }
  }
}
.topic_item_chose {
  margin-top: 0.07rem;
  padding-left: 1.8rem;
  // overflow: hidden;
  height: 0.68rem;
  .topic_item_chose_item_father {
    height: 0.52rem;
    // padding:0.08rem 0.1rem ;
    width: 0.92rem;
    border-radius: 0.36rem;
    background: #fffbf0;
    float: left;
    margin-right: 0.32rem;
    position: relative;
  }
  .topic_item_chose_item {
    width: 100%;
    height: 100%;
    // padding: 0 0.24rem;
    line-height: 0.48rem;
    font-size: 0.21rem;
    box-sizing: border-box;
    text-align: center;
    // float: left;
    color: #333333;
    border: 0.04rem solid #f3f2ef;
    border-radius: 0.26rem;
    cursor: pointer;
    margin-right: 0.14rem;
    position: relative;

    & > .ch_box {
      width: 0.34rem;
      height: 0.34rem;
      position: absolute;
      right: 0;
      bottom: -0.06rem;
      background-size: 100%;
      background-repeat: no-repeat;
    }

    & > .hand_gif {
      width: 1rem;
      height: 1rem;
      position: absolute;
      bottom: -0.5rem;
      right: -0.5rem;
      z-index: 35;
      & > img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .topic_item_chose_item:hover {
    background: #d2dff6;
    color: #395dd2;
    border: 0.04rem solid #d2dff6;
  }
  .topic_item_is_chose {
    background: #5b7ce8;
    color: #ffffff;
    border: 0.04rem solid #5b7ce8;
  }
}
.topic_item_tips {
  font-size: 0.21rem;
  color: #373737;
  padding-left: 1.85rem;
  margin: 0.34rem 0 0.28rem;
  position: relative;
  & > span {
    position: relative;
    & > div {
      height: 0.05rem;
      position: absolute;
      background-color: #5b7ce8;
      border-radius: 0.3rem;
      left: 0%;
      bottom: -10%;
    }
  }
}
</style>